<template>
	<LayoutBody :class="{'ui-layout-submenu-open': activeSubMenuName}">
        <div v-if="activeSubMenuName" class="ui-layout-submenu">
        	<ul class="ui-submenu">
        		<template v-for="(item, index) in subMenuList">
					<li
						v-if="!item.children || item.children.length == 0"
						class="ui-submenu-item"
						:class="{'ui-submenu-item-active': item.name == activeSubMenuName, 'ui-submenu-item-disabled': (item.meta && item.meta.disabled)}"
						@click="handleRoute(item)"
					>
						<div>{{ item.meta.title }}</div>
					</li>
					<template v-else>
						<li v-if="index != 0 && (item.meta && item.meta.divider !== false)" class="ui-submenu-divider"></li>
						<li class="ui-submenu-title" v-if="item.meta && item.meta.title"><div>{{ item.meta.title }}</div></li>
						<li
							class="ui-submenu-item"
							v-for="submenu in item.children"
							v-if="!submenu.meta.active"
							:class="{'ui-submenu-item-active': submenu.name == activeSubMenuName, 'ui-submenu-item-disabled': (submenu.meta && submenu.meta.disabled)}"
							@click="handleRoute(submenu)"
						>
							<div>{{ submenu.meta.title }}</div>
						</li>
					</template>
				</template>
        	</ul>
		</div>
		<LayoutContent>
			<router-view></router-view>
		</LayoutContent>
	</LayoutBody>
</template>


<script>
import LayoutBody from '@/components/layout/body.vue';
import LayoutContent from '@/components/layout/content.vue';
export default {
	name: 'subMain',
	components: {
		LayoutBody,
		LayoutContent
	},
	data() {
		return {
			activeSubMenuName: '',
			subMenuList: []
		}
	},
	computed: {
        menuList () {
            return this.$store.state.app.menuList;
        }
    },
    watch: {
    	'$route'(route) {
    		this.handleGetSubmenuList(route);
    	}
    },
    mounted() {
    	this.handleGetSubmenuList(this.$route);
    },
    methods: {
    	handleGetSubmenuList(route) {
    		// 获取当前子节点name
    		if(route.matched.length > 1) {
    			let prevName = route.matched[0].name;
    			let activeRoute = route.matched[route.matched.length - 1];
    			if(activeRoute.meta && activeRoute.meta.active) {
    				this.activeSubMenuName = activeRoute.meta.active;
    			}else{
    				this.activeSubMenuName = activeRoute.name;
    			}
    			// 获取子菜单
    			this.menuList.forEach(item => {
    				if(item.name == prevName) {
    					this.subMenuList = item.children;
    				}
    			})
    		}else{
    			this.activeSubMenuName = '';
    			this.subMenuList = [];
    		}
    	},
    	handleRoute(item) {
    		if(item.meta && item.meta.disabled) {
    			this.$Message.warning('努力开发中，敬请期待！');
    			return false;
    		}
    		this.$router.push({name: item.name});
    	}
    }
}
</script>